<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>医疗试卷成绩查询系统</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义颜色和字体 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36BFFA',
            neutral: {
              100: '#F5F7FA',
              200: '#E5E6EB',
              300: '#C9CDD4',
              400: '#86909C',
              500: '#4E5969',
              600: '#272E3B',
              700: '#1D2129',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .gradient-blue {
        background: linear-gradient(135deg, #165DFF 0%, #36BFFA 100%);
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .btn-hover {
        transition: all 0.3s ease;
      }
      .btn-hover:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(22, 93, 255, 0.25);
      }
    }
  </style>
</head>

<body class="bg-neutral-100 font-inter text-neutral-700 min-h-screen flex flex-col">
  <!-- 顶部导航 -->
  <header class="gradient-blue text-white shadow-md">
    <div class="container mx-auto px-4 py-5 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-stethoscope text-2xl"></i>
        <h1 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold">医疗考试成绩查询系统</h1>
      </div>
      <div class="hidden md:flex items-center space-x-6">
        <a href="#" class="hover:text-neutral-100 transition-colors"><i class="fa fa-home mr-1"></i> 首页</a>
        <a href="#" class="hover:text-neutral-100 transition-colors"><i class="fa fa-bar-chart mr-1"></i> 统计分析</a>
        <a href="#" class="hover:text-neutral-100 transition-colors"><i class="fa fa-cog mr-1"></i> 设置</a>
      </div>
      <button class="md:hidden text-white text-xl">
        <i class="fa fa-bars"></i>
      </button>
    </div>
  </header>

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 py-6">
    <!-- 筛选区域 -->
    <section class="bg-white rounded-xl p-5 mb-6 card-shadow">
      <h2 class="text-xl font-semibold mb-4 text-neutral-700">成绩查询</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- 试卷选择 -->
        <div class="relative">
          <label for="exam-select" class="block text-sm font-medium text-neutral-500 mb-1">试卷选择</label>
          <select id="exam-select" class="w-full px-4 py-2.5 rounded-lg border border-neutral-200 focus:border-primary focus:ring-1 focus:ring-primary outline-none appearance-none transition-all">
            <option value="">请选择试卷</option>
            <option value="1">内科疾病诊断模拟试卷</option>
            <option value="2">外科手术操作考核试卷</option>
            <option value="3">儿科常见疾病识别试卷</option>
            <option value="4">妇产科临床应用试卷</option>
            <option value="5">传染病防控知识试卷</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-neutral-400">
            <i class="fa fa-chevron-down text-xs"></i>
          </div>
        </div>
        
        <!-- 时间选择 -->
        <div>
          <label for="date-select" class="block text-sm font-medium text-neutral-500 mb-1">考试时间</label>
          <input type="date" id="date-select" class="w-full px-4 py-2.5 rounded-lg border border-neutral-200 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all">
        </div>
        
        <!-- 导出按钮 -->
        <div class="flex items-end">
          <button id="export-btn" class="w-full bg-white text-primary border border-primary px-4 py-2.5 rounded-lg font-medium flex items-center justify-center btn-hover">
            <i class="fa fa-download mr-2"></i> 导出Excel
          </button>
        </div>
      </div>
      
      <!-- 查询按钮 -->
      <div class="mt-5 flex justify-center">
        <button id="query-btn" class="gradient-blue text-white px-8 py-3 rounded-lg font-medium flex items-center btn-hover">
          <i class="fa fa-search mr-2"></i> 查询成绩
        </button>
      </div>
    </section>
    
    <!-- 数据展示区域 -->
    <section class="bg-white rounded-xl p-5 card-shadow">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-semibold text-neutral-700">成绩列表</h2>
        <div class="text-sm text-neutral-500">
          当前试卷：<span id="current-exam" class="font-medium text-primary">内科疾病诊断模拟试卷</span>
        </div>
      </div>
      
      <!-- 滚动表格容器 -->
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-neutral-200">
          <thead>
            <tr class="bg-neutral-100">
              <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">考生单位</th>
              <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">考试姓名</th>
              <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">考试成绩</th>
              <th class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">题目 1</th>
              <th class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">题目 2</th>
              <th class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">题目 3</th>
              <th class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">题目 4</th>
              <th class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">题目 5</th>
              <th class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">题目 6</th>
              <th class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">题目 7</th>
              <th class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">题目 8</th>
              <th class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">题目 9</th>
              <th class="px-3 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">题目 10</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-neutral-200" id="results-table">
            <!-- 表格数据将通过JavaScript动态生成 -->
          </tbody>
        </table>
      </div>
      
      <!-- 分页 -->
      <div class="mt-6 flex justify-between items-center">
        <div class="text-sm text-neutral-500">
          显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">24</span> 条记录
        </div>
        <div class="flex space-x-1">
          <button class="px-3 py-1 rounded border border-neutral-200 text-neutral-500 hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
            <i class="fa fa-chevron-left text-xs"></i>
          </button>
          <button class="px-3 py-1 rounded border border-primary bg-primary text-white">1</button>
          <button class="px-3 py-1 rounded border border-neutral-200 hover:bg-neutral-100">2</button>
          <button class="px-3 py-1 rounded border border-neutral-200 hover:bg-neutral-100">3</button>
          <button class="px-3 py-1 rounded border border-neutral-200 hover:bg-neutral-100">4</button>
          <button class="px-3 py-1 rounded border border-neutral-200 hover:bg-neutral-100">5</button>
          <button class="px-3 py-1 rounded border border-neutral-200 text-neutral-500 hover:bg-neutral-100">
            <i class="fa fa-chevron-right text-xs"></i>
          </button>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-neutral-200 mt-8">
    <div class="container mx-auto px-4 py-6">
      <div class="text-center text-neutral-500 text-sm">
        <p>© 2023 医疗考试成绩查询系统 - 版权所有</p>
        <p class="mt-1">技术支持：医疗信息部</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 模拟数据
    const examData = [
      {
        unit: "市第一人民医院",
        name: "张三",
        score: 85,
        answers: [10, 8, 9, 7, 10, 9, 8, 8, 9, 7]
      },
      {
        unit: "市第二人民医院",
        name: "李四",
        score: 76,
        answers: [8, 7, 6, 8, 9, 7, 8, 6, 8, 9]
      },
      {
        unit: "市第三人民医院",
        name: "王五",
        score: 92,
        answers: [10, 10, 9, 9, 8, 10, 9, 10, 9, 8]
      },
      {
        unit: "区中心医院",
        name: "赵六",
        score: 68,
        answers: [7, 6, 8, 7, 6, 7, 8, 5, 7, 8]
      },
      {
        unit: "县人民医院",
        name: "钱七",
        score: 88,
        answers: [9, 9, 8, 10, 9, 8, 10, 9, 8, 8]
      }
    ];

    // DOM 元素
    const resultsTable = document.getElementById('results-table');
    const queryBtn = document.getElementById('query-btn');
    const exportBtn = document.getElementById('export-btn');
    const examSelect = document.getElementById('exam-select');
    const currentExam = document.getElementById('current-exam');

    // 初始化表格数据
    function renderTable(data) {
      resultsTable.innerHTML = '';
      
      data.forEach((item, index) => {
        const row = document.createElement('tr');
        row.className = index % 2 === 0 ? 'bg-white' : 'bg-neutral-50';
        row.classList.add('hover:bg-blue-50', 'transition-colors');
        
        // 考生单位
        const unitCell = document.createElement('td');
        unitCell.className = 'px-4 py-3 whitespace-nowrap';
        unitCell.textContent = item.unit;
        row.appendChild(unitCell);
        
        // 考试姓名
        const nameCell = document.createElement('td');
        nameCell.className = 'px-4 py-3 whitespace-nowrap';
        nameCell.textContent = item.name;
        row.appendChild(nameCell);
        
        // 考试成绩
        const scoreCell = document.createElement('td');
        scoreCell.className = 'px-4 py-3 whitespace-nowrap';
        scoreCell.innerHTML = `<span class="px-2 py-1 rounded-full text-sm ${getScoreClass(item.score)}">${item.score}</span>`;
        row.appendChild(scoreCell);
        
        // 题目得分
        item.answers.forEach((answer, ansIndex) => {
          const ansCell = document.createElement('td');
          ansCell.className = 'px-3 py-3 whitespace-nowrap text-center';
          ansCell.innerHTML = `<span class="px-1.5 py-0.5 rounded ${getAnswerClass(answer)}">${answer}</span>`;
          row.appendChild(ansCell);
        });
        
        resultsTable.appendChild(row);
      });
    }

    // 根据分数获取样式类
    function getScoreClass(score) {
      if (score >= 90) return 'bg-green-100 text-green-800';
      if (score >= 80) return 'bg-blue-100 text-blue-800';
      if (score >= 70) return 'bg-yellow-100 text-yellow-800';
      return 'bg-red-100 text-red-800';
    }

    // 根据题目得分获取样式类
    function getAnswerClass(score) {
      if (score >= 9) return 'bg-green-100 text-green-800';
      if (score >= 7) return 'bg-blue-100 text-blue-800';
      if (score >= 6) return 'bg-yellow-100 text-yellow-800';
      return 'bg-red-100 text-red-800';
    }

    // 查询按钮点击事件
    queryBtn.addEventListener('click', () => {
      // 显示加载状态
      queryBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 查询中...';
      queryBtn.disabled = true;
      
      // 模拟查询延迟
      setTimeout(() => {
        // 更新当前试卷显示
        const selectedExam = examSelect.options[examSelect.selectedIndex];
        if (selectedExam && selectedExam.value) {
          currentExam.textContent = selectedExam.text;
        }
        
        // 渲染表格数据
        renderTable(examData);
        
        // 恢复按钮状态
        queryBtn.innerHTML = '<i class="fa fa-search mr-2"></i> 查询成绩';
        queryBtn.disabled = false;
        
        // 添加表格出现动画
        resultsTable.classList.add('animate-fadeIn');
        setTimeout(() => resultsTable.classList.remove('animate-fadeIn'), 500);
      }, 800);
    });

    // 导出按钮点击事件
    exportBtn.addEventListener('click', () => {
      // 显示加载状态
      exportBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 导出中...';
      exportBtn.disabled = true;
      
      // 模拟导出延迟
      setTimeout(() => {
        // 恢复按钮状态
        exportBtn.innerHTML = '<i class="fa fa-download mr-2"></i> 导出Excel';
        exportBtn.disabled = false;
        
        // 显示导出成功提示
        alert('Excel文件已成功导出！');
      }, 1000);
    });

    // 页面加载时初始化表格
    window.addEventListener('load', () => {
      renderTable(examData);
    });
  </script>
</body>
</html>
